<template>
	<div class="bg-white solid padding">
		<FullCalendar ref="calendar" :options="calendarOptions" />
		<el-dialog :title="!calendarEventForm.id?'设置日程':'日程详情'" :visible.sync="calendarEventDialog" width="600px" center
			@close="closeCalendarEventDialog">
			<el-form ref="calendarEventForm" :rules="calendarEventRules" :model="calendarEventForm" label-width="100px"
				center size="mini" label-position="left" v-if="!calendarEventForm.id">
				<el-row>
					<el-col :span="24">
						<el-form-item label="时间" prop="daterange">
							<el-date-picker size="mini" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"
								:default-time="['09:00:00', '17:00:00']" v-model="calendarEventForm.daterange"
								type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
								style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="事件标题" prop="title">
							<el-input type="text" placeholder="请输入事件" v-model="calendarEventForm.title">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="事件描述" prop="desp">
							<el-input type="textarea" :rows="2" placeholder="请输入事件" v-model="calendarEventForm.desp">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-descriptions class="margin-top" title="" :column="1" size="mini" border v-if="!!calendarEventForm.id">
				<el-descriptions-item>
					<template slot="label">
						<i class="el-icon-date"></i>
						时间
					</template>
					{{calendarEventForm.start}} 至 {{calendarEventForm.end}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						<i class="el-icon-c-scale-to-original"></i>
						类型
					</template>
					{{calendarEventForm.typeName}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						<i class="el-icon-house"></i>
						标题
					</template>
					{{calendarEventForm.title}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						<i class="el-icon-tickets"></i>
						描述
					</template>
					{{calendarEventForm.desp}}
				</el-descriptions-item>
			</el-descriptions>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="closeCalendarEventDialog" style="margin-top: 10px" size="mini"
					v-if="!!calendarEventForm.id">关&nbsp;闭
				</el-button>
				<el-button @click.native="closeCalendarEventDialog" style="margin-top: 10px" size="mini"
					v-if="!calendarEventForm.id">取&nbsp;消
				</el-button>
				<el-button @click.native="saveCalendarEvent" type="primary" size="mini" v-if="!calendarEventForm.id">
					确&nbsp;定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import '@fullcalendar/core/vdom' // solves problem with Vite
	import FullCalendar from '@fullcalendar/vue'
	import dayGridPlugin from '@fullcalendar/daygrid'
	import timeGridPlugin from '@fullcalendar/timegrid'
	import listPlugin from '@fullcalendar/list'
	import interactionPlugin from '@fullcalendar/interaction'
	import {
		generateUUID
	} from '@/utils/util.js'
	import common from '@/utils/common.js';
	import {
		isArray
	} from '@/utils/util.js'
	import {
		cloneDeep
	} from 'lodash'
	import {
		get_calendar_event_list
	} from '@/api/workPlatform/workPlatform'
	export default {
		name: 'DashboardOwnCalendar',
		components: {
			FullCalendar
		},
		beforeDestroy() {},
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		data() {
			return {
				calendarEventMap: new Map(),
				calendarEventDialog: false,
				calendarEventForm: {
					daterange: null,
					title: null,
					desp: null
				},
				calendarEventRules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}]
				},
				calendarApi: null,
				calendarOptions: {
					// 自定义渲染视图
					views: {
						dayGridMonth: {
							// https://fullcalendar.io/docs/date-formatting
							titleFormat: {
								year: 'numeric',
								month: 'numeric'
							}
						}
					},
					height: 610,
					plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
					// 自定义渲染按钮
					customButtons: {},
					// 自定义渲染头部
					headerToolbar: {
						start: 'prev next today',
						center: 'title',
						end: 'dayGridMonth timeGridWeek timeGridDay listMonth'
					},
					// 是否可以拖拽
					editable: false,
					// 是否可添加
					selectable: true,
					allDayText: "全天",
					// 自定义文本
					buttonText: {
						today: '今天',
						month: '月',
						week: '周',
						day: '天',
						list: '日程'
					},
					// 语言
					locale: 'zh-cn',
					// 设置周几为第一天
					firstDay: 1,
					// 初始化视图
					initialView: 'dayGridMonth',
					// 是否显示周末
					weekends: true,
					// 当事件过多时是否隐藏
					dayMaxEvents: false,
					// 事件存储
					events: [],
					// 事件渲染完加载这个，类似mounted
					eventDidMount: info => {
						//addLongPress(info, this.clickEvent, this.longPressEvent);
					},
					// 点击事件
					eventClick: this.handleEventClick,
					// 缩放事件
					eventResize: info => {
						console.log(info);
					},
					// 拖拽事件
					eventDrop: info => {
						console.log(info);
					},
					// 重新渲染
					handleDatesRender: () => {},
					// 日期选中
					select: () => {
						this.addModal = true;
						this.isRapid = true;
					},
					dateClick: this.handleDateClick,
				}
			}
		},
		computed: {},
		mounted() {
			this.calendarApi = this.$refs.calendar.getApi()
			this.initCalendarEvent();
		},
		methods: {
			async initCalendarEvent() {
				this.calendarEventMap = new Map();
				const res = await get_calendar_event_list();
				let getEvents = this.calendarApi.getEvents();
				if (getEvents && getEvents.length > 0) { //如果日历看板之前有数据，那么删除之前的数据
					getEvents.map(item => {
						this.calendarApi.getEventById(item.id).remove()
					})
				}
				(res.data || []).forEach(e => {
					this.calendarEventMap.set(e.id, e);
					this.calendarApi.addEvent(e);
				});
			},
			saveCalendarEvent() {
				const e = {
					id: generateUUID(),
					title: this.calendarEventForm.title,
					start: this.calendarEventForm.daterange[0],
					end: this.calendarEventForm.daterange[1],
					className: 'success'
				};
				this.calendarApi.addEvent(e)
				this.calendarEventDialog = false
			},
			closeCalendarEventDialog() {
				this.calendarEventForm = {
					daterange: null,
					event: null
				}
			},
			closeCalendarEventDialog(){
				this.calendarEventDialog = false;
			},
			handleDateClick(arg) {
				// this.calendarEventForm.daterange = [arg.dateStr, arg.dateStr]
				// this.calendarEventDialog = true;
			},
			handleEventClick(info) {
				const {
					event: {
						_def: {
							publicId
						}
					}
				} = info;
				this.calendarEventForm = this.calendarEventMap.get(publicId) || {};
				this.calendarEventDialog = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.fc-toolbar-title {
		font-size: 18px;
		font-weight: normal;
	}

	/deep/.fc-toolbar-chunk {
		button {
			font-size: 16px;
			line-height: 30px;
			padding: 3px 5px;
		}
	}

	/deep/.fc-daygrid-event {

		padding-left: 5px;
		color: #333;
		border-radius: 5px;
		background-color: #EEF3FF;
		border-width: 1px 1px 1px 3px;
		border-style: solid;

		.fc-daygrid-event-dot {
			display: none;
		}

		.fc-event-title {
			color: #333;
		}

		&.normal {
			border-color: $color-blue;

			.fc-event-time {
				color: $color-blue;
			}
		}

		&.success {
			border-color: $color-green;

			.fc-event-time {
				color: $color-green;
			}
		}

		&.warning {
			border-color: $color-orange;

			.fc-event-time {
				color: $color-orange;
			}
		}

		&.danger {
			border-color: $color-red;

			.fc-event-time {
				color: $color-red;
			}
		}
	}

	/deep/.fc-timegrid-event {
		padding-left: 5px;
		color: #333;
		border-radius: 5px;
		background-color: #EEF3FF;
		border-width: 1px 1px 1px 3px;
		border-style: solid;

		.fc-daygrid-event-dot {
			display: none;
		}

		.fc-event-title {
			color: #333;
		}

		&.normal {
			border-color: $color-blue;

			.fc-event-time {
				color: $color-blue;
			}
		}

		&.success {
			border-color: $color-green;

			.fc-event-time {
				color: $color-green;
			}
		}

		&.warning {
			border-color: $color-orange;

			.fc-event-time {
				color: $color-orange;
			}
		}

		&.danger {
			border-color: $color-red;

			.fc-event-time {
				color: $color-red;
			}
		}
	}

	/deep/.fc-list-event {

		&.normal .fc-list-event-graphic .fc-list-event-dot {
			border-color: #0081ff;
		}

		&.success .fc-list-event-graphic .fc-list-event-dot {
			border-color: #39b54a;
		}

		&.warning .fc-list-event-graphic .fc-list-event-dot {
			border-color: #f37b1d;
		}

		&.danger .fc-list-event-graphic .fc-list-event-dot {
			border-color: #e54d42;
		}
	}
</style>
